<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">
        class Lss extends React.Component {
            handleSubmit = (event) => {
                // 阻止默认的提交事件
                event.preventDefault();
                console.log('this', this);
                let userName = this.userNode.value
                let passWord = this.pwdNode.value
                alert(`我的用户名是${userName},我的密码是${passWord}`)
            }
            render() {
                return (
                    <div>
                        <form action="https:www.baidu.com" onSubmit={this.handleSubmit}>
                            <input ref={(currentNode) => { this.userNode = currentNode }} placeholder="请输入用户名" name="userName" />
                            <br />
                            <br />
                            <input ref={(currentNode) => { this.pwdNode = currentNode }} placeholder="请输入密码" name="passWord" />
                            <br />
                            <br />
                            <button>登录</button>
                        </form>
                    </div>
                )
            }
        }

        ReactDOM.render(<Lss />, document.querySelector('#test'))

        /**
         * 上述这个案例就是非受控组件，用了ref
         * */ 

    </script>
</body>

</html>